<template>
  <div class="mh-form-box">
    <div class="vux-demo">
      <img class="logo" src="../assets/logo_mohou.png">
      <h1>{{ msg }}</h1>
    </div>
    <group>
      <x-input title="账户" v-model="user_name" placeholder="请输入账号"></x-input>
      <x-input title="密码" v-model="password" type="password" placeholder="密码"></x-input>
    </group>
    <group>
      <x-button @click.native="handleSubmit" type="primary">立即登录</x-button>
    </group>
  </div>
</template>

<script>
import Vue from 'vue'
import { Alert, XInput, Group, XButton, Cell } from 'vux'
import qs from 'qs'
import Api from '@/libs/api'

export default {
  components: {
    XInput,
    XButton,
    Group,
    Cell,
    Alert
  },
  mounted () {
  },
  data () {
    return {
      msg: '魔猴网 - 3D打印云平台',
      user_name: '',
      password: ''
    }
  },
  methods: {
    handleSubmit () {
      let vue = this
      let qsLogin = qs.stringify({
        loginId: this.user_name,
        loginPassword: this.password
      })
      Api.http
        .get(Api.url.login + '?' + qsLogin)
        .then(function (result) {
          if (result.status !== 200) {
            Vue.$vux.alert.show({
              title: '魔猴网 - 错误提示',
              content: result.message
            })
          } else {
            vue.$store.commit('changeToken', result.token)
            vue.$router.push({
              name: 'wallpaper_list'
            })
          }
        })
        .catch(function (message) { })
    }
  }
}
</script>

<style>
@import "../style/main.less";
.vux-demo {
  margin: 20px;
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
